// 收费明细
<template>
  <div class="contractDetails">
    <div class="card-title">合同费用汇总</div>
    <el-form ref="form" class="form-wrap" size="small">
      <el-form-item label="合同总租金" prop="contractPayableTotal">
        <span>{{contractReceivableTotal | thousandMoney}}</span>
      </el-form-item>
      <el-form-item label="月租金" prop="rentAmount">
        <span>{{rentAmount | thousandMoney}}</span>
      </el-form-item>
      <el-form-item label="合同租期" prop="startDate">
        <span>{{startDate}}至{{endDate}}</span>
      </el-form-item>
    </el-form>
    <el-collapse class="collapse">
      <el-collapse-item>
        <template slot="title">
          <div class="title">合同延期生成费用明细</div>
        </template>
        <el-table :data="receivableFees1" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column prop="costMonth" :formatter="monthFommater" label="所属月份" width="180">
            <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
          </el-table-column>
          <el-table-column prop="chargeProjectName" label="收费项目" width="180" />
          <el-table-column prop="costPeriodStart" label="开始日期" width="180" />
          <el-table-column prop="costPeriodEnd" label="结束日期" width="180" />
          <el-table-column prop="receivableDate" label="应收日期" width="180" />
          <el-table-column prop="receivableMoneyOld" label="合同应收金额" :formatter="priceFormatter" width="180" />
          <el-table-column prop="adjustmentAmount" label="调整金额" :formatter="priceFormatter" width="180" />
          <el-table-column prop="receivableMoney" label="应收金额" :formatter="priceFormatter" width="180" />
        </el-table>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <div class="title">已生成费用明细</div>
        </template>
        <el-table :data="receivableFees2" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column prop="costMonth" :formatter="monthFommater" label="所属月份" width="180">
            <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
          </el-table-column>
          <el-table-column prop="chargeProjectName" label="收费项目" width="180" />
          <el-table-column prop="costPeriodStart" label="开始日期" width="180" />
          <el-table-column prop="costPeriodEnd" label="结束日期" width="180" />
          <el-table-column prop="receivableDate" label="应收日期" width="180" />
          <el-table-column prop="receivableMoneyOld" label="合同应收金额" :formatter="priceFormatter" width="180" />
          <el-table-column prop="adjustmentAmount" label="调整金额" :formatter="priceFormatter" width="180" />
          <el-table-column prop="receivableMoney" label="应收金额" :formatter="priceFormatter" width="180" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getGenerateFeeObj } from "../../api/rent-contract.js";
import { fetchList } from '../../api/rent-contract-acceptance.js'
export default {
  name: "contractDetails",
  data () {
    return {
      //合同明细数据
      //待生成费用
      receivableFees1: [],

      //已生成费用
      receivableFees2: [],

      contractReceivableTotal: 0,
      rentAmount: 0,
      startDate: '',
      endDate: '',
      //选中的合同明细项目
      multipleSelection: [],
    };
  },


  methods: {
    //加载费用信息
    async preViewFee (contractId, contract) {
      let rentContractId = contractId;
      if (contract) {
        this.rentAmount = contract.rentAmount
        this.startDate = contract.startDate
        this.endDate = contract.endDate
      }

      try {
        const response = await fetchList({ rentContractId: rentContractId, category: 1, size: 200 })
        this.receivableFees2 = response.data.data.records
      } catch (error) {
        console.error('加载应收款服务端服务错误' + error)
      }

      try {
        const res = await getGenerateFeeObj(rentContractId)
        this.receivableFees1 = res.data.data;
      } catch (error) {
        console.error("加载费用服务端服务错误" + error);
      }

      //计算总费用
      //总租金求和
      this.contractReceivableTotal = 0
      let fee;
      for (let i = 0; i < this.receivableFees1.length; i++) {
        fee = this.receivableFees1[i];
        if (fee.chargeProjectId == '1' || fee.chargeProjectId == '5' || fee.chargeProjectId == '6' || fee.chargeProjectId == '7') {
          this.contractReceivableTotal += this.receivableFees1[i].receivableMoneyOld
        }
      }
      for (let i = 0; i < this.receivableFees2.length; i++) {
        fee = this.receivableFees2[i];
        if (fee.chargeProjectId == '1' || fee.chargeProjectId == '5' || fee.chargeProjectId == '6' || fee.chargeProjectId == '7') {
          this.contractReceivableTotal += this.receivableFees2[i].receivableMoneyOld
        }
      }
      this.contractReceivableTotal = this.contractReceivableTotal.toFixed(2);
    },

    monthFommater (row, column) {
      return row.costMonth.toString().substr(0, 7);
    },

    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped lang="scss">
@include formWrap(3);
.contractDetails {
  .title {
    font-size: 16px;
  }
  /deep/ .el-table {
    &::before {
      display: none;
    }
    .el-table__header {
      border-color: #dee2e6;
    }
    thead th {
      background-color: #fafafa;
      color: #333;
    }
    td {
      padding: 10px 0;
    }
  }
}
</style>
